<template>
 <div class="wrapper">
<swiper :options="swiperOption" >
    <!-- slides -->
    <swiper-slide v-for="(item,index) of swiperList" :key="item.id">
        <img :src="item.imgSrc" class="swiper_img" v-if="item.imgSrc" />     
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
  </swiper>
 </div>
</template>

<script>
export default {
  name: "HomeSwiper",
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
        paginationClickable: true,
        paginationBulletRender: function(swiper, index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        },
        loop: true,
        grabcusor: true,
        autoplayDisableOnInteraction: false,
        autoplay: 3000,
        effect: "fade",
        prevButton: ".swiper-button-prev",
        roundLengths: true,
        nextButton: ".swiper-button-next"
        // paginationType: "fraction"
      },
      swiperList: [
        {
          id: 1,
          imgSrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545558572159&di=6b58f232a618a63825b081ac39695d07&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F960a304e251f95caf1852c0bc4177f3e6709521e.jpg"
        },
        {
          id: 2,
          imgSrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540141130740&di=69ae21cfd1fa94de0b5c7063612ba7d8&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01be415615fb2832f875ae34c6cf19.jpg"
        },
        {
          id: 3,
          imgSrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540735872&di=beba300952f99300fb689692a80424ff&imgtype=jpg&er=1&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F0e2442a7d933c895fe6517aad01373f0830200c3.jpg"
        },
        {
          id: 4,
          imgSrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540661987591&di=3de6d5e68aa67c687e9b2ef42da151ee&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1302%2F17%2Fc1%2F18179448_1361085555590.jpg"
        }
      ]
    };
  },
  components: {}
};
</script>

<style lang="less" scoped>
.wrapper {
  overflow: hidden;
  .swiper_img {
    width: 101%;
    height: 420.5px;
    // border-radius: 0 10px 10px 0;
  }
  /deep/ .swiper-pagination-bullet-active {
    color: white !important;
  }
  /deep/ .swiper-pagination-bullet {
    width: 18px;
    height: 18px;
    line-height: 18px;
    //   background: #409EFF;
    color: #303133;
  }
}
</style>
